<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utg-8">
<title>Insert title here</title>
</head>
<body>
	<div class="panel-body" id="medicine_add_div">
				
			<form class="form-horizontal" role="form" onsubmit="javascript:return false;">
				<button type="button" class="btn btn-defalut" @click="openAuto">{{msg}}</button>
				<div v-show="autoScan" class="well well-sm">
				<div class="form-group">
					<input v-model="traceCode"  @keyup.enter="enter" type="text" class="form-control" id="hombio" v-focus="autoScan"
							placeholder="请扫描药品">
				</div>
				</div>
				<div class="well well-sm">
				<div class="form-group">
					<input v-model="name" type="text" class="form-control" id="b"
							placeholder="药品名称（必填）">
				</div>
				<div class="form-group">
					<input v-model="number" type="text" class="form-control" id="a" 
							placeholder="药品编号（必填）">
				</div>
				<div class="form-group">
					<input v-model="company" type="text" class="form-control" id="f"
							placeholder="生产商（选填）">
				</div>
				<div class="form-group">
					<input v-model="phone" type="text" class="form-control" id="e"
							placeholder="生产商电话（选填）">
				</div>
				<div class="form-group">
					<input type="number" v-model="quantityPerCase" type="text" class="form-control"
							id="c" placeholder="箱子规格（选填）">
				</div>
				<div class="form-group">
					<input type="number" v-model="quantityPerBox" type="text" class="form-control"
							id="d" placeholder="盒子规格（选填）">
				</div>
				<div class="form-group">
					<input v-model="memo" type="text" class="form-control" id="g"
							placeholder="备注（选填）">
				</div>
				</div>
			</form>
		</div>

	<div id="btn_div" class="pull-right">
		<!--  <button @click="back" class="btn btn-info">返回</button>-->
		<button @click="submit" class="btn btn-info">确定</button>
	</div>
</body>
<script type="text/javascript">
	var medicine = new Vue({
		el: '#medicine_add_div',
		data:{
			msg:'开启智能识别',
			autoScan:false,
			traceCode:'',
			name:'',
			number:'',
			phone:'',
			company:'',
			memo:'',
			quantityPerBox:'',
			quantityPerCase:''
			
		},
		methods:{
			openAuto:function(){
				if(this.autoScan){
					this.msg='打开智能识别';
					this.autoScan=false;
				}else{
					this.msg='关闭自动扫描';
					this.autoScan=true;
				}
				
				
			},
			enter:function(event){
				if(this.traceCode.replace(/\D/g, '').length < 24){
					alert('输入有误');
					this.traceCode = '';
					return ;
				}
				var str = this.traceCode.split('，');
				if(str.length == 5){
					this.name = str[1];
					this.number = str[2];
					this.company = str[3];
					this.phone = str[4];
					this.traceCode = '';
					this.autoScan = false;	
				} else{
					alert('这个追溯码格式比较特殊,只能手动输入了...');
				}
			}
			
		},
		directives: {
   			 focus: {
       			 update: function (el, {value}) {
         		   if (value) {
          		      el.focus();
          		  }
      		  }
  	  		}
		},
	});
	
	new Vue({
		el : '#btn_div',
		methods:{
			back:function(event){
				showMedicineTable();
			},
			submit:function(event){
				if(medicine.name==''){
					alert('药品名称不能为空');
					return;
				}else if(medicine.number==''){
					alert('药品编号不能为空');
					return;
				}else if(medicine.number.replace(/\D/g, '').length == 0){
					alert('药品编号输入有误');
					return;
				}else{
					if(medicine.quantityPerBox.length != medicine.quantityPerBox.replace(/\D/g, '').length){
						alert('盒子规格输入有误');
						return;
					}
					if(medicine.quantityPerCase.length != medicine.quantityPerCase.replace(/\D/g, '').length){
						alert('箱子规格输入有误');
						return;
					}
					var m = {name:medicine.name,number:medicine.number.replace(/\D/g, ''),company:medicine.company,
					phone:medicine.phone,quantityPerCase:medicine.quantityPerCase,quantityPerBox:medicine.quantityPerBox,memo:medicine.memo};
					$.ajax({
						url:'<%=request.getContextPath()%>/m/addMedicine',
						type:'post',
						contentType:'application/json',
						data:JSON.stringify(m),
						success:function(){
							if($("#supplier_select").val() == undefined){
								showMedicineTable();
							}else{
								dialog.disableDialog();
							}
							
							
						}
					});
					
				}
			}
		}
	});
</script>
</html>